<template>
  <div>
    <div v-transfer-dom class="clockSearchBox" v-if="isShowClockchoose">
      <transition name="fade-opacity">
        <div v-if="isShowClockchoose" class="c-translucent-balck50 c-text-hidden c-pz6 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="clockChooseHide" data-type="cancel"></div>
      </transition>
      <transition name="fade-translate-y">
        <div class="c-bg-white c-pz6 c-pa c-p-l0 c-p-b0 c-p-r0" v-if="isShowClockchoose">
          <div class="c-w100 c-bg-white c-br-tr20 c-br-tl20 c-p c-hh76 clockchoose c-bd-b1-f6">
            <div class="c-pa c-p-t0 c-p-l16 c-hh76 c-fc-sgray c-flex-row c-flex-center c-fs24 c-w30" @click="clockChooseHide">
              取消
            </div>
            <div class="c-pa c-p-t0 c-p-r16 c-hh76 theme-fc c-flex-row c-flex-center c-fs24 c-w30" @click="clockChooseSure">
              确定
            </div>
          </div>
          <div class="c-bg-white c-fs24 sort-box c-maxh500 c-content-scroll c-pb15 c-minh360 c-mt10">
            <div v-for="(item,index) in chooseList" :key="index"
              @click="clickClassList(item.name,item.classId)"
              :class="item.classId == classId ? 'theme-fc' : ''"
              class="c-w100 c-flex-row c-aligni-center c-pt30 c-ph24 c-mimw160">
              <span class="iconfont c-fs24 c-mr16" :class="item.classId == classId ? 'theme-fc' : 'c-fc-sgray'">{{item.classId == classId ? '&#xe796;' : '&#xe6f7;'}}</span>{{item.name}}
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewSearchBar",
  components: {
  },
  props: {
    isShowClockchoose: {
      type: Boolean,
      default: false
    },
    // selectTittle下拉框数据
    chooseList: {
      type: Array,
      default: () => []
    },
    showClassListid: {
      type: String,
      default: ""
    },
    showClassListName: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      classId:'',
      className:'所有成员'
    }
  },
  watch: {
  },
  activated() {
  },
  methods: {
    clickClassList(name, classId) {
      this.classId = classId
      this.className = name
    },
    clockChooseSure() {
      this.showClassListid = this.classId
      this.showClassListName = this.className
      this.$emit('clockChooseSure', this.showClassListName, this.showClassListid)
      this.$emit('clockChooseHide')
    },
    clockChooseHide() {
      this.classId = this.showClassListid
      this.className = this.showClassListName
      this.$emit('clockChooseHide')
    }
  }
}
</script>

<style scoped>
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.c-lh52 {
  line-height: 1.3rem;
}
.clockSearchBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.clockchoose{
  background: #fbf9fe;
}
.c-minh200{
  min-height: 5rem;
}
</style>